import React, { Component } from 'react'

// const obj = {
//     'a-b-c': '呵呵呵',
//     'a_b_c': '哈哈哈'
// }
// console.log(obj['a-b-c']);

export default class App extends Component {

    state = {
        note: '',
        str: '',
        sex: '男',
        hobby: []
    }

    changeValue = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        })
    }


    // 针对的是多选
    changeHobby = (event) => {
        console.log(event.target.value, event.target.checked);


        const arr = [...this.state.hobby]

        if (event.target.checked) {
            // 选中
            // this.state.hobby.push(event.target.value)

            arr.push(event.target.value)
        } else {
            // 取消选中
            // 根据内容找到数组中的索引位置
            const index = this.state.hobby.findIndex(item => event.target.value == item)
            // 根据索引找到要删除的内容，将其删除掉
            arr.splice(index, 1)
        }

        this.setState({
            hobby: arr
        })
    }

    render() {
        return (
            <div>
                <h2> {this.state.note} </h2>
                <input type="text" name='note' value={this.state.note} onChange={this.changeValue} />
                <textarea name="note" value={this.state.note} onChange={this.changeValue} id="" cols="80" rows="5"></textarea>

                <hr />

                {/* option 中没有 value 的情况下，标签中的内容就是值 */}
                {/* option 中要是有 value 的情况下，选择的内容就是 value 的值 */}
                <select name="str" value={this.state.str} onChange={this.changeValue} id="">
                    <option value={'麻辣烫'}>麻辣烫</option>
                    <option value={'泡面加火腿'}>泡面加火腿</option>
                    <option value={'快餐'}>快餐</option>
                    <option value={'烧烤'}>烧烤</option>
                    <option value={'麦当劳'}>麦当劳</option>
                </select> ------ {this.state.str}

                <hr />

                <input checked={this.state.sex == '男'} type="radio" name="sex" value={'男'} onChange={this.changeValue} id="" /> 男
                <input type="radio" name="sex" value={'女'} onChange={this.changeValue} id="" /> 女
                ------ 您选择的是：{this.state.sex}

                <hr />

                <input type="checkbox" name="hobby" onChange={this.changeHobby} value={'睡觉'} id="" />睡觉
                <input type="checkbox" name="hobby" onChange={this.changeHobby} value={'吃饭'} id="" />吃饭
                <input type="checkbox" name="hobby" onChange={this.changeHobby} value={'打游戏'} id="" />打游戏
                <input type="checkbox" name="hobby" onChange={this.changeHobby} value={'学习'} id="" />学习
                <input type="checkbox" name="hobby" onChange={this.changeHobby} value={'散步'} id="" />散步
                <input type="checkbox" name="hobby" onChange={this.changeHobby} value={'抖音'} id="" />抖音
                <input type="checkbox" name="hobby" onChange={this.changeHobby} value={'看书'} id="" />看书
                <br />
                ------ 您想要做什么：{this.state.hobby}
            </div>
        )
    }
}
